<template>
  <div class="container">
    <n-drawer v-model:show="isDrawer" :width="width">
      <n-drawer-content :title="title" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="用户名" path="username">
            <n-input placeholder="请输入用户名" disabled v-model:value="formParams.username" />
          </n-form-item>
          <n-form-item label="昵称" path="nickName">
            <n-input placeholder="请输入昵称" v-model:value="formParams.nickName" />
          </n-form-item>
          <n-form-item label="头像" path="avatar">
            <BasicUpload
              :action="`/v1.0/files`"
              :data="{ type: 0 }"
              name="files"
              maxNumber="1"
              :width="100"
              :height="100"
              @uploadChange="uploadChange"
              v-model:value="formParams.avatar"
            />
          </n-form-item>
          <n-form-item label="手机号" path="phoneNumber">
            <n-input placeholder="请输入手机号" v-model:value="formParams.phoneNumber" />
          </n-form-item>
          <n-form-item label="邮箱" path="email">
            <n-input placeholder="请输入邮箱" v-model:value="formParams.email" />
          </n-form-item>
          <n-form-item label="类型" path="userType">
            <n-select
              v-model:value="formParams.userType"
              filterable
              placeholder="选择用户类型"
              :options="typeOptions"
            />
          </n-form-item>
          <n-form-item label="性别" path="sex">
            <n-radio-group v-model:value="formParams.sex" name="sexRadioGroup">
              <n-space>
                <n-radio v-for="sex in sexs" :key="sex.value" :value="sex.value">
                  {{ sex.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="状态" path="state">
            <n-switch v-model:value="formParams.state" />
          </n-form-item>
        </n-form>

        <template #footer>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, reactive, ref, unref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { updateUser } from '@/api/system/user';
  import { BasicUpload } from '@/components/Upload';

  const rules = {
    label: {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
    path: {
      required: true,
      message: '请输入路径',
      trigger: 'blur',
    },
  };

  defineProps({
    title: {
      type: String,
      default: '编辑用户',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const defaultValueRef = () => ({
    username: '',
    nickName: '',
    phoneNumber: '',
    email: '',
    userType: 1,
    state: 1,
    sex: 1,
    userId: 1,
  });
  let isDrawer = ref(false);
  let subLoading = ref(false);
  let formParams = reactive({
    username: '',
    nickName: '',
    phoneNumber: '',
    avatar: [],
    email: '',
    userType: 1,
    state: 1,
    sex: 1,
    userId: 1,
  });
  const sexs = [
    {
      value: 1,
      label: '男',
    },
    {
      value: 0,
      label: '女',
    },
  ];
  const typeOptions = [
    {
      label: '管理员',
      value: 1,
    },
    {
      label: '普通用户',
      value: 0,
    },
  ];

  function openDrawer(record) {
    isDrawer.value = true;
    formParams.username = record.username;
    formParams.nickName = record.nickName;
    formParams.avatar[0] = record.avatar;
    formParams.phoneNumber = record.phoneNumber;
    formParams.email = record.email;
    formParams.userType = record.userType;
    formParams.state = record.state;
    formParams.sex = record.sex;
    formParams.userId = record.userId;
  }
  defineExpose({
    openDrawer,
  });

  function closeDrawer() {
    isDrawer.value = false;
  }

  const formSubmit = () => {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let updateUserObj = formParams;
        updateUserObj.avatar = formParams.avatar[0];
        updateUserObj.state = formParams.state ? 1 : 0;
        await updateUser(updateUserObj);
        message.success('修改成功');
        closeDrawer();
      } else {
        message.error('请填写完整信息');
      }
    });
  };

  function uploadChange(list: string[]) {
    formParams.avatar = unref(list);
  }

  function handleReset() {
    formRef.value.restoreValidation();
    formParams = Object.assign(formParams, defaultValueRef());
  }
</script>
<style lang="less" scoped></style>
